<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <script>
    $(function () {
      $(".uls li").click(function () {
        $(this).css({"background":"red"})
        $(this).siblings().css({"background":"white"})
      })
    })

  </script>
</head>
<body>
<div>
  <ul class="uls">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>

  </ul>
</div>
</body>
<style>
  *{
    margin:0;
    padding:0;
  }
  ul,li{
    list-style:none;
  }
  ul{
    width:200px;
    height:auto;
    border:1px solid #ccc;
  }
  ul li{
    width:100%;
    height:40px;
    text-align:center;
    border:1px solid #ccc;
    line-height:40px;
  }
  .red{
    width:100%;
    height:40px;
    background:red;
  }
</style>
</html>
